<template>
  <div>
    <HomeTop></HomeTop>
    <div class="">
      <div class="ok-page-width">
        <div>
          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/news.jpg')"></el-image>
        </div>
        <div class="line-20"></div>
        <div class="ok-box-flex">
          <div class="ok-page-left">
            <div class="ok-width-max">
              <div class="ok-park-model-menu" style="width: 100%">
                <div class="title">新闻中心</div>
                <div class="item" :class="{active1:newsType=='zxdt'}" id="contactInfo" @click="selectInfo('zxdt')" style="cursor:pointer">最新动态</div>
                <div class="item" :class="{active1:newsType=='xwzx'}" id="feedback" @click="selectInfo('xwzx')" style="cursor:pointer">新闻资讯</div>
                <div class="item" :class="{active1:newsType=='tzgg'}" id="feedback" @click="selectInfo('tzgg')" style="cursor:pointer">通知公告</div>
              </div>
            </div>
          </div>
          <div class="ok-page-main">
            <div class="ok-width-max" style="min-height: 500px;">
              <div v-if="newsType=='zxdt'">
                <div class="ok-park-info-title">
                  <el-page-header @back="goBack" content="最新动态"></el-page-header>
                </div>
                <div class="ok-info20">
                  <div class="content">
                    <div style="width: 100%">
                      <div class="">
                        <div>
                          <ul>
                            <li v-for="(item,index) in newsPages.list" :key="index" class="box_under_line">
                              <span style="cursor: pointer" @click="$router.push({path:'/views/news/newsView',query:{id:item.id}})">{{item.title}}</span>
                              <span style="float: right;">{{ ok.date.formatDateCN(item.onlineTime) }}</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="newsType=='xwzx'">
                <div class="ok-park-info-title">
                  <el-page-header @back="goBack" content="新闻资讯"></el-page-header>
                </div>
                <div class="ok-info20">
                  <div class="content">
                    <div style="width: 100%">
                      <div class="">
                        <div>
                          <ul>
                            <li v-for="(item,index) in newsPages.list" :key="index" class="box_under_line">
                              <span style="cursor: pointer" @click="$router.push({path:'/views/news/newsView',query:{id:item.id}})">{{item.title}}</span>
                              <span style="float: right;">{{ ok.date.formatDateCN(item.onlineTime) }}</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="newsType=='tzgg'">
                <div class="ok-park-info-title">
                  <el-page-header @back="goBack" content="通知公告"></el-page-header>
                </div>
                <div class="ok-info20">
                  <div class="content">
                    <div style="width: 100%;">
                      <div class="">
                        <div>
                          <ul>
                            <li v-for="(item,index) in newsPages.list" :key="index" class="box_under_line">
                              <span style="cursor: pointer" @click="$router.push({path:'/views/news/newsView',query:{id:item.id}})">{{item.title}}</span>
                              <span style="float: right;">{{ ok.date.formatDateCN(item.onlineTime) }}</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--    分页-->
              <div class="line-20"></div>
              <div class="ok-box-center">
                <div class="block">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="newsPages.current"
                      :page-sizes="[5, 10, 20, 50]"
                      :page-size="newsPages.pageSize"
                      layout="sizes, prev, pager, next"
                      :total="newsPages.total">
                  </el-pagination>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import ok from "../../assets/ok";
import HomeFoot from "@/components/HomeFoot.vue";
import api from "@/api/publicApi"

export default {
  name: 'NewsIndex',
  computed: {
    ok() {
      return ok
    }
  },
  components: {
    HomeFoot,
    HomeTop,
  },
  data(){
    return{
      showThis:0,
      newsType:"zxdt",
      newsPages:{
        list:[],
        total:0,
        current:0,
        size:8,
      },
      ok_page:{
        type:"zxdt",
        key:"",
        pageSize:8,
        current:0
      },

    }
  },
  mounted() {
    this.init();
  },
  methods:{
    init(){
      if (this.$route.query.type){
        this.newsType = this.$route.query.type;
        this.ok_page.type = this.$route.query.type;
      }
      api.getNewsPage(this.ok_page).then(res =>{
        this.newsPages = res.result;
      })
    },
    selectInfo(item){
      this.newsType = item;
      this.ok_page.type = item;
      this.$router.push({
        path:"/views/news/index",
        query:{
          type:item
        }
      })
      this.init();
    },
    goBack() {
      history.go(-1);
    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
  }
}
</script>
<style>
.box_under_line{
  padding: 10px 0;
  border-bottom: 1px solid rgb(136, 139, 141);
}
a{
  color: black;
}
a:hover{
  color: #0092FF;
}
</style>
